@charset "utf-8";
@import'./common';

.fl{
    float: left;
}
.fr{
    float: right;
}
.clear::after{
    content:"" ;
    display: block;
    clear: both;
}
a{
    color: black;
}

body {
    min-width: 992px;
}

// header{
//     width: 100%;
//     border-bottom: 1px solid #e5e5e5;
//     .wrapper{
//         width: 82%;
//         padding: 7px 0;
//         max-width: 1230px;
//         margin: 0 auto;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .haier-logo{
//             text-align: center;
//             img{
//                 width: 52%;
//                 vertical-align: baseline;
//             }
//         }
//         ul{
//             position: relative;
//             padding-right: 4%;
//             flex-basis: 50%;
//             display: flex;
//             justify-content: space-between;
//             align-items: center;
//             margin-bottom: 0;
//             align-self: stretch;
//             li{
//                 font-size: 14px;
//                 float: left;
//                 font-weight: bold;
//                 // margin-right: 7%;
//                 padding: 0 .6rem;
//             }
//         }
//         .search-box{
//                 display: flex;
//                 flex-basis: 25%;
//                 // margin-right: 100px;
//                 .search-item{
//                     // width: 80%;
//                     position: relative;
//                     display: inline-block;
//                     i{
//                         position: absolute;
//                         bottom: 0;
//                         right: 0;
//                         font-size: 30px;
//                     }
//                     input{
//                         padding: 8px;
//                         // padding-right: 38px;
//                         // width: 100%;
//                         outline: none;
//                         border: none;
//                         background-color: #fafafa;
//                         font-size: 13px;
//                     }
                    
//                 }
//                 >i{
//                     display: inline-block;
//                     font-size: 30px;
//                     margin-left: 20px;
//                 }
            
            
//         }
//     }
// } 

.pc-outbox{
    width: 86%;
    margin: 0 auto;
    padding-bottom: 100px;
    h3{
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        margin-top: 80px;
    }
    .title-text{
        font-size: 14px;
        margin-top: 18px;
        line-height: 16px;
        text-align: center;
        color: #666666;
    }
    .banner{
        img{
            width: 100%;
        }
    }
    
    .six-fnc{
        padding-bottom: 50px;
        // h3{
        //     margin-top: 80px;
        //     // font-size: 30px;
        //     // font-weight: bold;
        //     // text-align: center;
        // }
        // >p{
        //     margin-top: 18px;
        //     // font-size: 14px;
        //     color: #666666;
        //     line-height: 16px;
        //     margin-top: 18px;
        //     text-align: center;
        // }
        ul{
            margin-top: 35px;
            width: 58%;
            margin: 0 auto;
            margin-top: 35px;
            display: flex;
            justify-content: space-between;
            li{
                // float: left; 不用浮动 父级会没高度
                display: inline-block;
                p{
                    // font-size: 14px;
                    text-align: center;
                    margin-top: 10px;
                }
            }
        }
    }

    .pc-banner{
        padding-bottom: 50px;
        img{
            width: 100%;
        }
        
    }

    .pc-threesc{
        width: 100%;
        .threesc-imgs{
            width: 88%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .first-img{
                transition: all 0.3s ease;
                position: relative;
                flex-basis: 30%;
                >img{
                    width: 100%;
                }
                >span{
                    width: 30%;
                    height: 21%;
                    padding: 0 2px;
                    position: absolute;
                    bottom: 113px;
                    left: 110px;
                    font-size: 20px;
                    text-align: center;
                    color: #fff;
                    background-color: #184996;
                    border-radius: 50%;
                    img{
                        display: block;
                        width: 35%;
                        margin: 12px auto 5px;
                    }
                    transition: all 0.3s ease;
                    z-index: 3;
                }
                .first-text{
                    color: #fff;
                    position: absolute;
                    bottom: -14px;
                    left: 58px;
                    opacity: 0;
                    z-index: 3;
                    
                    em{
                        font-size: 22px;
                        display: block;
                        margin-bottom: 10px;
                    }
                    p{
                        font-size: 20px;
                        line-height: 24px;
                    }
                    transition: all 0.3s ease;
                }
                .mask{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: grey;
                    opacity: .6;
                    z-index: 2;
                    display: none;
                }
            }
        }
        .first-img:hover{
                // z-index: 3;
                // background-color: red;
                span{
                    bottom: 231px;
                }
                .first-text{
                    opacity: 1;
                    bottom: 102px;
                }
                .mask{
                    display: block;
                }
        }
    }

    .pc_voice{
        position: relative;
        img{
            width: 100%;
        }
        ul{
            position: absolute;
            top: 24px;
            right: 138px;
            text-align: center;
            width: 30%;
            // height: 20%;
            li{
                height: 16.66667%;
                font-size: 18px;
                color: #4ba5cf;
                margin-top: 14px;
                animation:fschange 10s infinite;

                &:nth-child(2){
                    animation-delay: 1.6s;
                }
                &:nth-child(3){
                    animation-delay: 3.2s;
                }
                &:nth-child(4){
                    animation-delay: 4.8s;
                }
                &:nth-child(5){
                    animation-delay: 6.4s;
                }
                &:nth-child(6){
                    animation-delay: 8s;
                }
            }
            
        }
    }

    @keyframes fschange{
        16%{
            font-size: 24px;
        }
        32%{
            font-size: 18px;
        }
    }

    .pc_phone{
        img{
            width: 100%;
        }
    }

    .pc_member{
        img{
            width: 100%;
        }
    }

    .pc_banner{
        img{
            width: 100%;
        }
    }

    .pc_botmnav{
        width: 100%;
        font-size: 30px;
        font-weight: bold;
        color: #333333;
        text-align: center;
        margin-bottom: 45px;
    }

    .pc_btm{
        text-align: center;
        img{
            margin: 0 20px;
        }
    }
}

// footer{
//     width: 100%;
//     background-color: #f6f7f9;
//     .ft-wrapper{
//         max-width: 1200px;
//         margin: 0 auto;
//         padding-top: 22px;
//         .ft-list{
//             display: flex;
//             ul{
//                 width: 16%;
//                 display: inline-block;
//                 li{
//                     margin-top: 4px;
//                     a{
//                         color: #444;
//                         font-size: 12px;
//                     }
//                 }
//                 li:first-child{
//                     font-size: 14px;
//                     font-weight: 700;
//                 }
//                 li:nth-child(2){
//                     margin-top: 15px;
//                 }
//             }
//         }

//         .ft-bottom{
//             display: flex;
//             justify-content: space-between;
//             border-top: 1px solid #c8c8c8;
//             margin-top: 18px;
//             padding: 15px 0;
//             .b-left{
//                 a{
//                     font-size: 12px;
//                 }
//                 span{
//                     padding: 0 6px;
//                 }
//             }
//             .b-middle{
//                 font-size: 12px;
//                 span:first-of-type{
//                     padding: 0 6px;
//                 }
//             } 
//             .b-right{
//                 display: flex;
//                 span{
//                     font-size: 12px;
//                 }
//                 i{
//                     // position: absolute;
//                     font-size: 24px;
//                     color: #c8c8c8;
//                     line-height: 20px;
//                     margin-left: 6px;
//                 }
//             }
//         }
//     }
// }